<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nav_test</title>

    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/search.css">
    <!-- 用了font-awesome的图标库 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>

<body style="background-color: #91B493;">
    <!-- 常规导航栏部分 -->
    <div class="nav_bar">
        <nav>
            <input type="radio" name="tab" id="home" checked>
            <input type="radio" name="tab" id="comment">
            <input type="radio" name="tab" id="about">
            <input type="radio" name="tab" id="search">
            <!-- 注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。 -->
            <label for="home" class="home">
                <a href="#">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    Home
                </a>
            </label>
            <label for="comment" class="comment">
                <a href="#">
                    <i class="fa fa-comment" aria-hidden="true"></i>
                    some
                </a>
            </label>
            <label for="about" class="about">
                <a href="#">
                    <i class="fa fa-question" aria-hidden="true"></i>
                    About
                </a>
            </label>
            <label for="search" class="search">
                <a href="#">
                    <i class="fa fa-search" aria-hidden="true"></i>
                    Search
                </a>
            </label>
            <div class="tab"></div>
        </nav>
    </div>

    <!-- 缩小状态 -->
    <div id="min_container">
        <div class="pop_out_menu">
            <input type="checkbox" id="menu_btn">
            <label for="menu_btn" class="menu-btn">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </label>
            <div class="wrapper">
                <ul class="menu">
                    <li><a href="https://www.baidu.com" target="_self">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">whatever</a></li>
                    <li><a href="#">Search</a></li>
                </ul>
            </div>
        </div>

        <!-- 搜索框最外边框，动画变化的边框，从圆形变成长条形圆角 -->
        <div class="search_btn">
            <form action="https://www.bing.com/search" target="_blank">
                <div class="search-box">
                    <!-- 左侧搜索框 -->
                    <div class="key">
                        <input type="text" placeholder="Input words..." name=q>
                    </div>
                    <!-- 右侧搜索按钮 -->
                    <div class="bt">
                        <input type="image" name="img" id="icon_search" src="./images/search.png">
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/search.js"></script>

</html>